<template>

  <table v-if="total !== 0" class="my-pagination">
    <tbody>
      <tr>
        <td class="pagePre" @click="change(Number(payload.page) - 1)" :class="{'disablePage':Number(payload.page) == 1}">
          <router-link v-if="Number(payload.page) > 1" :to="{name: $route.name, query: {...payload, page: payload.page - 1}}">上一页</router-link>
          <span v-else>上一页</span>
        </td>
        <td v-for="(item, index) in data" :key="index" :class="{active: item == page}" @click="change(item)">
          <router-link class="link" :to="{name: $route.name, query: getQuery(item)}">{{ item }}</router-link>
        </td>
        <td class="pageNext" @click="change(Number(payload.page) + 1)" :class="{'disablePage': Number(payload.page) === Math.ceil(total / Number(payload.per_page) )}">
          <router-link v-if="Number(payload.page) < Math.ceil(total / Number(payload.per_page) )" :to="{name: $route.name, query: {...payload, page: Number(payload.page) + 1}}">下一页</router-link>
          <span v-else>下一页</span>
        </td>
      </tr>
    </tbody>
  </table>

</template>

<script>
// page, per_page
export default {
  name: 'MyPagination',
  props: {
    payload: {
      type: Object,
      default: () => ({
        page: this.$route.query.page || 1,
        per_page: this.$route.query.per_page || 12
      })
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    const { total, payload } = this
    const { page, per_page } = payload
    const data = getPaginationData({ total, page, per_page })
    return {
      visible: false,
      data
    }
  },
  computed: {
    per_page() {
      return this.payload.per_page
    },
    page() {
      return this.payload.page
    }
  },
  watch: {
    page() {
      this.init()
    },
    total() {
      this.init()
    }
  },
  methods: {
    init() {
      const { total, page, per_page } = this
      this.data = getPaginationData({ total, page, per_page })
    },
    change(page) {
      if (
        page == '...' ||
        page == this.page ||
        Number(page) <= 0 ||
        Number(page) > Math.ceil(this.total / Number(this.payload.per_page))
      ) {
        return
      }

      this.$emit('update:payload', {
        ...this.payload,
        page
      })
      this.$emit('change', page)
    },
    getQuery(item) {
      const query = { ...this.payload, page: item }
      return query
    }
  }
}

// 获取连续数组
function getContinueMap(start = 0, end = 0) {
  const data = []
  for (let i = start; i < end; i++) {
    data.push(i)
  }
  return data
}

// 获取分页数据
function getPaginationData({
  total = 0,
  page = 1,
  per_page = 10,
  buttonNum = 7
}) {
  const totalPage = Math.ceil(total / per_page)
  let data = []
  // 开始数据
  let start = page - Math.floor((buttonNum - 2) / 2)
  if (start <= 2) {
    start = 1
  } else {
    // 左侧显示省略号
    data.push(1)
    data.push('...')
  }

  // 结束数据
  let end = start + buttonNum - 2
  if (end >= totalPage - 1) {
    end = totalPage
    if (start > 3) {
      start = Math.max(3, end - (buttonNum - 2))
    }
    data = data.concat(getContinueMap(start, end + 1))
  } else {
    // 右侧显示省略号
    data = data.concat(getContinueMap(start, end))
    data.push('...')
    data.push(totalPage)
  }
  return data
}
</script>

<style lang="scss" scoped>
.my-pagination {
  border-collapse: separate;
  border-spacing: 10px;
  text-align: center;
  td {
    border: 1px solid #dfdfdf;
    user-select: none;
    min-width: 32px;
    height: 32px;
    line-height: 30px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 2px;
    background-color: #fff;
  }
  .active {
    background: $main-color;
    border-color: $main-color;
    .link {
      color: #eee;
    }
  }
  .link {
    display: block;
  }
}
.pagePre {
  padding: 0 6px;
}
.pageNext {
  padding: 0 6px;
}
.disablePage {
  color: rgba(188, 188, 193, 1) !important;
}
</style>
